@charset "utf-8";


$font-size:40;
@function r($px){
    @return $px/$font-size*1rem;
}


header{
    width: 100%;
    
}
.backbtn{
    width: r(121);
    height: r(54);
    border: 1px solid #FF9344;
    text-align: center;
    line-height: r(60);
    border-radius: r(13);
    margin-top: r(48);
    margin-left: r(23);
    font-size: r(25);
}
header h3{
    text-align: center;
    font-size: r(26);
    font-weight: normal;
    margin-top: r(65);
}

 section .searchBar{
                width: r(267);
                height: r(56);
                border: 1px solid #ff9344;
                border-radius:r(50);
                padding-left: r(16);
                padding-right: r(12);
                box-sizing: border-box;
                margin: 0 auto;
                outline: none;
                line-height:r(48) ;
               
               
            }
 section .searchBar input{
                width: r(194);
                height: r(44);
                border: 0;
                font-size: r(24);
                vertical-align: middle;
               
                
                
    }
section .searchBar i{
                font-size:r(28) ;
                color: #ff9344;
            }
section h6{
    width: 22%;
    font-size: r(30);
    margin: r(30) auto r(16);
    
}
.search-box{
    width: 70%;
    margin: 0 auto;
    
    ul{
        li{
            width: r(124);
            height: r(63);
            background: #dcdcdc;
            color: #959595;
            font-size: r(20);
            text-align: center;
            line-height: r(63);
            float: left;
            margin-right: r(6);
             &:nth-of-type(4n){
            margin-right: 0;
        }
        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4){
            margin-bottom: r(3);
        }
        }
       
    }
}

.hot-search-title{
    width: 95%;
    height: r(47);
    margin: r(48) auto r(30);
    .hot-search-icon{
        width: r(32);
        height: r(47);
        float: left;
        padding-left: r(21);
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    h3{
        font-size: r(30);
        float: left;
        margin-left: r(8);
         line-height: r(52);
    }
    h5{
        font-size: r(24);
        float: right;
        line-height: r(52);
        margin-right: r(6);
    }
    .icon-you{
        color: #ff3944;
        float: right;
        line-height: r(52);
        padding-right: r(21);
       font-size: r(25);
    }
}

.hot-search-photo{
    width: 95%;
    margin: 0 auto;
    .search-photo1{
        width: r(279);
        height: r(352);
        float: left;
        img{
            width: 100%;
        }
    }
     .search-photo2{
        width: r(420);
        height: r(147);
       float: right;
        img{
            width: 100%;
        }
    }
     .search-photo4{
        width: r(195);
        height: r(197);
        display: inline-block;
        float: right;
        margin-top: r(9);
        margin-right: r(11);
        img{
            width: 100%;
        }
    }
     .search-photo3{
        width: r(211);
        height: r(197);
        float: right;
        margin-top: r(9);
        img{
            width: 100%;
        }
    }
}

.recommendtitle{
    width: 95%;
    height: r(38);
    margin: r(48) auto r(30);
    .recommend-icon{
        width: r(41);
        height: r(38);
        float: left;
        padding-left: r(21);
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    h3{
        font-size: r(30);
        float: left;
        margin-left: r(8);
         line-height: r(46);
    }
    h5{
        font-size: r(24);
        float: right;
        line-height: r(46);
        margin-right: r(6);
    }
    .icon-you{
        color: #ff3944;
        float: right;
        line-height: r(46);
        padding-right: r(21);
       font-size: r(25);
    }
}
.recommend-photo{
    width: 95%;
    margin: 0 auto;
}
.recommend_ps{
    width: 30%;
    float: left;
    img{
        width: 100%;
        height: 100%;
    }
}
.recommend_ps2{
    width: 30%;
    float: left;
    margin-left: r(34);
    margin-right: r(34);
    img{
        width: 100%;
        height: 100%;
    }
}
